<template>
	<view class="display displayColumn width-100 fontSize font_comm  displaycenter_aliem">
		<u-navbar @rightClick="rightClick" :autoBack="true"  :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title" >油枪管理</text>
			</template>
		</u-navbar>
		<!-- 为空是显示 -->
		<view class="fn_null display  width-100 all_item M-T24 displayColumn" style="margin-top: 134rpx;" v-if="false">
			<image class="fn_image" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/50cb06712ff646e09b8008b1fc49e301.png" mode=""></image>
			<span class="fn_ttx1 M-T30">暂无添加油品</span>
		</view>
		<view class="fn_all display  width-100 displayColumn displaycenter_aliem">
			<view class="all_item display  displayColumn M-T24" v-for="(item,index) in ingoArr" :key="index" @click="add(item.id,item.moos)">
				<view class="item_one display  width-100">
					<span class="fn_tth1 M-L24">{{item.stationName}}</span>
					<span class="fn_tth2 M-R24" v-if="false">生效时间：2024-7-8 16:08</span>
				</view>
				<view class="item_two display  width-100 " style="margin-top: 48rpx;">
					<view class="two_left display  displaycenter_aliem">
						<view class="left_one display  all_item M-L24">
							<span class="fn_qiyou ">{{item.petrolType==0?'汽油':'柴油'}}</span>
						</view>
						<span class="fn_jiu2" style="margin-left: 8rpx;">{{item.petrolName}}</span>
					</view>
					<view class="two_right display  displaycenter_aliem">
						<span class="fn_qiyong M-R24">{{item.petrolType==0?'启用':'禁用'}}</span>
						<!-- <span class="fn_jinyong M-R24">禁用</span> -->
					</view>
				</view>
				<view class="item_three display width-100  M-T24 displaycenter_aliem">
					<view class="three_one display  all_item M-L24">
						<span class="fn_shichangjia">市场价：{{item.marketPrice||'--'}}</span>
					</view>
					<view class="three_one1 display  all_item ">
						<span class="fn_shichangjia1">油站价：{{item.stationPrice||'--'}}</span>
					</view>
					<view class="three_one1 display  all_item M-R24">
						<span class="fn_shichangjia1">会员价：{{item.memberPrice||'--'}}</span>
					</view>
				</view>
				<!-- view  -->
				<view class="display displaycenter_aliem width-100 M-T24" style="text-align: left; " v-if="item.gunNames==null">
					<span class="fn_weitianjia M-L24">未添加油枪</span>
				</view>
				<view class="display width-100 displaycenter_aliem  fn_skd M-T24"  v-else>
					
					<block v-for="(item,index) in item.moos" :key="index">
						 <span class="fn_qiang">{{item}}</span>
					</block>
					<!--
					<span class="fn_qiang">1号枪</span>
					<span class="fn_qiang">1号枪</span>
					<span class="fn_qiang">1号枪</span>
					<span class="fn_qiang">1号枪</span> -->
				</view>
			</view>
		</view>
		
		
		
		<!-- <view class="width-100  fn_nulls display  all_item" >
			<button class="fn_btn_bottoms" @click="add">添加油枪号</button>
		</view> -->
		<!-- 为空显示的按钮 -->
		<!-- <view class="width-100  fn_nulls display  all_item" v-if="false">
			<button class="fn_btn_bottoms" @click="add">立即添加</button>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				value1: Number(new Date()),
				pageNum:1,
				ingoArr:[],
				total:100,
				gunNames:[]
			}
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			if(this.ingoArr.length==0&&this.pageNum==1){
				
			}else{
				this.pageNum=1,
				this.ingoArr=[],
				this.total=100
				this.getList();
			}
		},
		onReachBottom() {
			if(this.total==this.ingoArr.length){
				
			}else{
				this.pageNum++;
				this.getList();
			}
		
		},
		methods: {
			getList() {
				let data = {
					pageNum: this.pageNum,
					pageSize: 10
				}
				this.$req.get('/xcx/petrolProduct/list', data).then(res => {
					console.log(res)
					this.total = res.data.total;
					if (res.data.code == 200) {
						
						let moos = []
						res.data.rows.forEach(item=>{
							if(item.gunNames!==null){
								item.moos = item.gunNames.split(',')
								
							}
						})
						this.ingoArr = this.ingoArr.concat(res.data.rows)
						console.log(this.ingoArr)
					} else {
						this.$modal.msg(res.data.msg);
					}
			
				})
			},
			add(id,arr){
				uni.navigateTo({
					url:`/packageC/addYouqiang/addYouqiang?id=${id}&moos=${arr}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.fn_nulls{
	position: fixed;
	bottom: 108rpx;
}
.fn_skd{
	justify-content: space-around;
}
.fn_btn_bottoms{
	width: 690rpx;
	height: 66rpx;
	background: #126BC9;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
.fn_image{
	width: 234rpx;
	height: 234rpx;
}
.fn_ttx1{
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.all_item{
	width: 690rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_ttx2{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_tt3{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_tth1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_tth2{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.item_one{
	justify-content: space-between;
}
.left_one{
	width: 84rpx;
	height: 15rpx;
	background: #126BC9;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_qiang{
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
}
.fn_qiyou{
	font-weight: 600;
	font-size: 20rpx;
	color: #FFFFFF;
}
.fn_jiu2{
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
}
.fn_qiyong{
	font-weight: 600;
	font-size: 24rpx;
	color: #00DCA9;
}
.fn_jinyong{
	font-weight: 600;
	font-size: 24rpx;
	color: #C34439;
}
.item_two{
	justify-content: space-between;
}
.item_three{
	justify-content: space-between;
}
.three_one{
	width: 178rpx;
	height: 15rpx;
	background: rgba(18,107,201,0.1);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_shichangjia{
	font-weight: 600;
	font-size: 24rpx;
	color: #126BC9;
}
.fn_shichangjia1{
	font-weight: 400;
	font-size: 24rpx;
	color: #212121;
}
.three_one1{
	width: 178rpx;
	height: 15rpx;
	background: rgba(18,107,201,0.1);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_input{
	font-weight: 400;
	font-size: 24rpx;
	color: #000;
	padding-left: 24rpx;
	width: 642rpx;
	height: 64rpx;
	background: #F6F6F6;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.fn_input1{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.shichang{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_weitianjia{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
</style>
